import { reactive, type App, type Component } from 'vue';

type EventShim = {
  new (...args: any[]): {
    $props: {
      onClick?: (...args: any[]) => void;
    };
  };
};

export type WithInstall<T> = T & {
  install(app: App): void;
} & EventShim;

export type CustomComponent = Component & { displayName?: string };

export const withInstall = <T extends CustomComponent>(
  component: T,
  alias?: string
) => {
  (component as Record<string, unknown>).install = (app: App) => {
    const compName = component.name || component.displayName;
    if (!compName) return;
    app.component(compName, component);
    if (alias) {
      app.config.globalProperties[alias] = component;
    }
  };
  return component as WithInstall<T>;
};

/**
 *
 * @param visible 是否显示
 * @param visibleChange 显示或隐藏事件
 * @param ok 完成事件
 * @param loading 是否加载
 * @param title 标题
 * @returns
 */
export const modalConfig = (
  visible: boolean,
  visibleChange: ((...args: any[]) => any) | undefined,
  ok: ((...args: any[]) => any) | undefined,
  loading: boolean,
  title: string
) => {
  return reactive<{
    width: string | number;
    title: string;
    visible: boolean;
    resizable: boolean;
    maskClosable: boolean;
    centered: boolean;
    maxable: boolean;
    confirmLoading: boolean;
    'onUpdate:visible': ((...args: any[]) => any) | undefined;
    onOk: ((...args: any[]) => any) | undefined;
  }>({
    width: '80%',
    title,
    visible,
    resizable: true,
    maskClosable: false,
    centered: true,
    maxable: true,
    confirmLoading: loading,
    'onUpdate:visible': visibleChange,
    onOk: ok
  });
};
